<!DOCTYPE html>

<head xmlns="http://www.w3.org/1999/html">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>挥发油数据库检索系统</title>
    <script src="js/vue.js"></script>
    <!-- import JavaScript -->
    <script src="js/index.js"></script>
    <script src="js/axios.min.js"></script>
    <link rel="stylesheet" href="css/icon.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet"  href="css/test.css">
    <link rel="stylesheet"  href="css/mystyle.css">
</head>
<body>
<div id="app" >
<el-container>

    <el-header style="height: 10%;">

        <el-image
                style="width: 500px; height: 150px;margin: 0 auto;align-items: center;display: flex;"
                :src="logo"
                :fit="fits"></el-image>

    </el-header>

    <el-main style="overflow-x: hidden;height: 85%" >

        <el-form label-position="top" label-width="80px"  model="formLabelAlign" >
<el-row>
    <el-col :span="2">
        <el-form-item >
            <el-select v-model="id" placeholder="搜索类型" >
                <el-option label="挥发油" value="1"></el-option>
                <el-option label="中药" value="2"></el-option>
                <el-option label="组分" value="3"></el-option>
                <el-option label="被促透药物" value="4"></el-option>
                <el-option label="药理作用" value="5"></el-option>
            </el-select>
        </el-form-item>
    </el-col>
    <el-col :span="5">
        <el-form-item >
            <el-input v-model="word"  ></el-input>
        </el-form-item>
    </el-col>
    <el-col :span="2">
        <el-form-item >
            <el-form-item>
                <el-button type="primary" @click="findAll" >查询</el-button>
            </el-form-item>
        </el-form-item>
    </el-col>
</el-row>
        </el-form>



<div class="table-parent" @contextmenu.prevent.capture :style="{left:num+'%',width:kuan+'%'}">
    <!--            挥发油                                                 -->


        <el-table
                :data="tableData1.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                stripe
                v-show="show1"
                :header-cell-style="{ textAlign: 'center' }"
                :cell-style="{ textAlign: 'center' }"
                style="font-size: 16px;">

            <el-table-column type="expand" >
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand" >
                        <el-form-item >
                            <p2><b>基本信息</b></p2>
                        </el-form-item>
                        <br>
                        <el-form-item label="挥发油中文名">
                            <span>{{ props.row.oilChineseName }}</span>
                        </el-form-item>
                        <el-form-item label="挥发油英文名">
                            <span>{{ props.row.oilEnglishName }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="类别（单体/提取物）">
                            <span>{{ props.row.type }}</span>
                        </el-form-item>
                        <el-form-item label="来源中药">
                            <span>{{ props.row.origin }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item>
                            <p2><b>药效作用</b></p2>
                        </el-form-item>
                        <br>
                        <el-form-item label="药理作用">
                            <span style=" display: inline-block; width: 310px;word-break: break-all; white-space: normal;">{{ props.row.efficacy }}</span>
                        </el-form-item>
                        <el-form-item label="药理作用（参考文献）">
                            <span class="span">{{ props.row.edoc }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item >
                            <p2><b>物理性质</b></p2>
                        </el-form-item>
                        <br>
                        <el-form-item label="相对密度">
                            <span>{{ props.row.relativeDensity }}</span>
                        </el-form-item>
                        <el-form-item label="比旋度">
                            <span>{{ props.row.specificRotation }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="折光率">
                            <span>{{ props.row.refractiveIndex }}</span>
                        </el-form-item>
                        <el-form-item label="沸点">
                            <span>{{ props.row.boiling }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="挥发性参数">
                            <span>{{ props.row.volatile }}</span>
                        </el-form-item>
                        <el-form-item label="参考文献">
                            <span class="span">{{ props.row.pdocument }}</span>
                        </el-form-item>
                        <br>




                        <el-form-item>
                            <p2><b>毒性</b></p2>
                        </el-form-item>
                        <br>
                        <el-form-item label="毒性">
                            <span>{{ props.row.toxic }}</span>
                        </el-form-item>
                        <el-form-item label="参考文献">
                            <span class="span">{{ props.row.tdocument }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>

            <el-table-column
                    prop="oilChineseName"
                    label="挥发油中文名"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="oilEnglishName"
                    label="挥发油英文名"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="type"
                    label="类别"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="origin"
                    width="180"
                    label="中药来源">
            </el-table-column>
            <el-table-column
                    prop="efficacy"
                    width="180"
                    label="药理作用">
            </el-table-column>
            <el-table-column
                    label="详细信息"
                    width="290">
                <template slot-scope="scope">
                    <el-button type="primary" @click="viewInfo(scope.row.oilChineseName)">化学组成信息</el-button>
                    <el-button type="success" @click="viewInfo1(scope.row.oilChineseName)">促透应用信息</el-button>
                    <!--                            <el-button type="info" @click="viewInfo2(scope.row)">来源中药信息</el-button>-->
                </template>
            </el-table-column>
        </el-table>
        <div class="block" align="center" >
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    layout="prev, pager, next"
                    :total="totals"
                    v-show="show2"
                    :page-size="pageSize">
            </el-pagination>
        </div>

    <el-dialog title="组分信息" :visible.sync="dialogTableVisible">
        <el-table
                :data="ticketInfoform"
                style="width: 100%">
            <el-table-column
                    prop="composition"
                    label="组成信息"
                    min-width="35%">
            </el-table-column>
            <el-table-column
                    prop="extractionMethod"
                    label="提取方法/挥发油含量 ％ (mL∙g-1)/（粒度; 加水量; 浸泡时间; 提取时间）/产地"
                    min-width="30%">
            </el-table-column>
            <el-table-column
                    prop="document"
                    label="文献"
                    min-width="35%">
            </el-table-column>
        </el-table>
        <!--            <span>组分信息</span>-->
        <!--            <el-tag size="small">{{ticketInfoform.composition}}</el-tag>-->
        <!--            <br>-->
        <!--            <span>提取方法</span>-->
        <!--            <el-tag size="small" >{{ticketInfoform.extractionMethod}}</el-tag>-->
        <!--            <br>-->
        <!--            <span>参考文献</span>-->
        <!--            <el-tag size="small" >{{ticketInfoform.cdocument}}</el-tag>-->

    </el-dialog>

    <el-dialog title="应用信息" :visible.sync="dialogTableVisible1">
        <el-table
                :data="ticketInfoform1"
                style="width: 1050px">
            <el-table-column
                    label="名称"
                    width="120">
                <template slot-scope="scope">
                    <el-button @click="findOilApplication(scope.row.drugChineseName)">{{scope.row.drugChineseName}}</el-button>
                </template>
            </el-table-column>
            <el-table-column
                    prop="massFraction"
                    label="挥发油质量分数/增渗倍数（扩散池/渗透屏障/接受液/供试品）"
                    width="330">
            </el-table-column>
            <el-table-column
                    prop="document"
                    label="文献"
                    width="330">
            </el-table-column>
        </el-table>
        <!--            <span>药物名称</span>-->
        <!--            <el-tag size="small">{{ticketInfoform1.drugPromotedCName}}</el-tag>-->
        <!--            <br>-->
        <!--            <span>英文名</span>-->
        <!--            <el-tag size="small" >{{ticketInfoform1.drugPromotedEName}}</el-tag>-->
        <!--            <br>-->
        <!--            <span>应用详细</span>-->
        <!--            <el-tag size="small" >{{ticketInfoform1.massFraction}}</el-tag>-->
        <!--            <br>-->
        <!--            <span>参考文献</span>-->
        <!--            <el-tag size="small" >{{ticketInfoform1.adocument}}</el-tag>-->
    </el-dialog>





    <!--     组分                     -->
    <template>

        <el-table
                :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                stripe
                v-show="show5"
                style="font-size: 16px;">

            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand" >
                        <!--                            <el-form-item label="结构式">-->
                        <!--                                <el-image-->
                        <!--                                        style="width: 100px; height: 100px"-->
                        <!--                                        :src="getImgUrl(props.row.id)"-->
                        <!--                                        :fit="fit"></el-image>-->
                        <!--                            </el-form-item>-->
                        <el-form-item label="中文名">
                            <span>{{ props.row.chineseName }}</span>
                        </el-form-item>
                        <el-form-item label="英文名">
                            <span>{{ props.row.englishName }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="异名">
                            <span>{{ props.row.diffName }}</span>
                        </el-form-item>
                        <el-form-item label="PubChem CID">
                            <span>{{ props.row.pubChemCID }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="分子式">
                            <span>{{ props.row.formula }}</span>
                        </el-form-item>
                        <el-form-item label="分子量">
                            <span>{{ props.row.weight }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="Canonical SMILES">
                            <span style=" display: inline-block; width: 310px;word-break: break-all; white-space: normal;">{{ props.row.canonicalSMLES }}</span>
                        </el-form-item>
                        <el-form-item label="Isomeric SMILES">
                            <span>{{ props.row.isomericSMILES }}</span>
                        </el-form-item>
<br>
                        <el-form-item label="结构类别">
                            <span>{{ props.row.classify }}</span>
                        </el-form-item>
                        <el-form-item label="摩尔体积 MVol">
                            <span>{{ props.row.mvol }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="熔点（℃）">
                            <span>{{ props.row.meltingPoint }}</span>
                        </el-form-item>
                        <el-form-item label="XLogP3">
                            <span>{{ props.row.xlogP3 }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="溶解度参数(CED1/2)" >
                            <span>{{ props.row.solubilityParameter }}</span>
                        </el-form-item>
                        <el-form-item label="汉森溶解度参数(δP)" >
                            <span>{{ props.row.hansenSolubilityParameterP }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="汉森溶解度参数(δH)" >
                            <span>{{ props.row.hansenSolubilityParameterH }}</span>
                        </el-form-item>
                        <el-form-item label="汉森溶解度参数(δD)" >
                            <span>{{ props.row.hansenSolubilityParameterD }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="氢键供体数目" >
                            <span>{{ props.row.hydrogenBondDonorCount }}</span>
                        </el-form-item>
                        <el-form-item label="氢键受体数目" >
                            <span>{{ props.row.hydrogenBondAcceptorCount }}</span>
                        </el-form-item>
<br>
                        <el-form-item label="拓扑极性表面积(Å²)" >
                            <span>{{ props.row.topologicalPolarSurfaceArea }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>

            <el-table-column
                    label="结构式"
                    width="190">
                <template slot-scope="scope">
                    <el-image
                            style="width: 170px; height: 170px"
                            :src="getImgUrl(scope.row.id)"
                            @click="bigImg(getImgUrl(scope.row.id))"
                            :preview-src-list="srcList"
                            :fit="fit"></el-image>
                </template>
            </el-table-column>
            <el-table-column
                    prop="chineseName"
                    label="中文名"
                    width="160">
            </el-table-column>
            <el-table-column
                    prop="englishName"
                    label="英文名"
                    width="180">
            </el-table-column>
<!--            <el-table-column-->
<!--                    prop="diffName"-->
<!--                    label="别名"-->
<!--                    width="100">-->
<!--            </el-table-column>-->
            <el-table-column
                    prop="formula"
                    width="100"
                    label="分子式">
            </el-table-column>
            <el-table-column
                    prop="canonicalSMLES"
                    label="Canonical SMILES">
            </el-table-column>
            </el-table-column>
        </el-table>
        <div class="block" align="center" >
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    layout="prev, pager, next"
                    :total="totals"
                    v-show="show6"
                    :page-size="pageSize">
            </el-pagination>
        </div>
    </template>


    <!--        中药-->
    <template>

        <el-table
                :data="tableData1.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                stripe
                v-show="show3"
                style="font-size: 16px;">

            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="中药中文名">
                            <span>{{ props.row.drugChineseName }}</span>
                        </el-form-item>
                        <el-form-item label="中药英文名">
                            <span>{{ props.row.drugEnglishName }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="拉丁名">
                            <span>{{ props.row.latinName }}</span>
                        </el-form-item>
                        <el-form-item label="异名">
                            <span>{{ props.row.diffName }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="科属">
                            <span>{{ props.row.part }}</span>
                        </el-form-item>
                        <el-form-item label="药效分类">
                            <span>{{ props.row.classify }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="性味">
                            <span>{{ props.row.taste }}</span>
                        </el-form-item>
                        <el-form-item label="归经">
                            <span>{{ props.row.category }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="功效">
                            <span>{{ props.row.efficacy }}</span>
                        </el-form-item>
                        <el-form-item label="主治">
                            <span>{{ props.row.attending }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>

            <el-table-column
                    prop="drugChineseName"
                    label="中药中文名"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="drugEnglishName"
                    width="190"
                    label="中药英文名">
            </el-table-column>
            <el-table-column
                    prop="efficacy"
                    width="220"
                    label="功效">
            </el-table-column>
            <el-table-column
                    prop="attending"
                    width="300"
                    label="主治">
            </el-table-column>
            <el-table-column
                    label="详细信息"
                    width="290">
                <template slot-scope="scope">
                    <el-button type="primary" @click="viewInfo2(scope.row.drugChineseName)">挥发油信息</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block" align="center" >
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    layout="prev, pager, next"
                    :total="totals"
                    v-show="show4"
                    :page-size="pageSize">
            </el-pagination>
        </div>

        <el-dialog title="挥发油信息" :visible.sync="dialogTableVisible2">
            <el-button v-for="item in oilName" @click="findOil(item)">{{item}}</el-button>
        </el-dialog>
    </template>


    <!--        被促透药物             -->
    <template>

        <el-table
                :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                stripe
                v-show="show7"
                style="font-size: 16px;">

            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <!--                            <el-form-item label="结构式">-->
                        <!--                                <el-image-->
                        <!--                                        style="width: 100px; height: 100px"-->
                        <!--                                        :src="getImgUrl(props.row.id)"-->
                        <!--                                        :fit="fit"></el-image>-->
                        <!--                            </el-form-item>-->
                        <el-form-item label="中文名">
                            <span>{{ props.row.chineseName }}</span>
                        </el-form-item>
                        <el-form-item label="英文名">
                            <span>{{ props.row.englishName }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="异名">
                            <span>{{ props.row.diffName }}</span>
                        </el-form-item>
                        <el-form-item label="PubChem CID">
                            <span>{{ props.row.pubChemCID }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="分子式">
                            <span>{{ props.row.formula }}</span>
                        </el-form-item>
                        <el-form-item label="分子量">
                            <span>{{ props.row.weight }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="Canonical SMILES"  >
                            <span style=" display: inline-block; width: 310px;word-break: break-all; white-space: normal;">{{ props.row.canonicalSMILES }}</span>
                        </el-form-item>
                        <el-form-item label="Isomeric SMILES">
                            <span>{{ props.row.isomericSMILES }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="结构类别">
                            <span>{{ props.row.type }}</span>
                        </el-form-item>
                        <el-form-item label="摩尔体积 MVol">
                            <span>{{ props.row.mvol }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="熔点（℃）">
                            <span>{{ props.row.meltingPoint }}</span>
                        </el-form-item>
                        <el-form-item label="XLogP3">
                            <span>{{ props.row.XLogP3 }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="溶解度参数(CED1/2)">
                            <span>{{ props.row.solubilityParameter }}</span>
                        </el-form-item>
                        <el-form-item label="汉森溶解度参数(δP)">
                            <span>{{ props.row.hansenSolubilityParameterP }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="汉森溶解度参数(δH)">
                            <span>{{ props.row.hansenSolubilityParameterH }}</span>
                        </el-form-item>
                        <el-form-item label="汉森溶解度参数(δD)">
                            <span>{{ props.row.hansenSolubilityParameterD }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="氢键供体数目">
                            <span>{{ props.row.hydrogenBondDonorCount }}</span>
                        </el-form-item>
                        <el-form-item label=" 氢键受体数目">
                            <span>{{ props.row.hydrogenBondAcceptorCount }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="拓扑极性表面积(Å²)">
                            <span>{{ props.row.topologicalPolarSurfaceArea }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>

            <el-table-column
                    label="结构式"
                    width="200">
                <template slot-scope="scope">
                    <el-image
                            style="width: 170px; height: 170px"
                            :src="getImgUrl1(scope.row.id)"
                            @click="bigImg(getImgUrl1(scope.row.id))"
                            :preview-src-list="srcList"
                            :fit="fit"></el-image>
                </template>
            </el-table-column>
            <el-table-column
                    prop="chineseName"
                    label="中文名"
                    width="130">
            </el-table-column>
            <el-table-column
                    prop="englishName"
                    label="英文名"
                    width="180">
            </el-table-column>
            <!--                <el-table-column-->
            <!--                        prop="diffName"-->
            <!--                        label="别名"-->
            <!--                        width="380">-->
            <!--                </el-table-column>-->
            <el-table-column
                    prop="formula"
                    width="180"
                    label="分子式">
            </el-table-column>
            <el-table-column
                    prop="canonicalSMILES"
                    width="280"
                    label="Canonical SMILES">
            </el-table-column>
            <el-table-column
                    label="详细信息"
                    width="290">
                <template slot-scope="scope">
                    <el-button type="primary" @click="viewInfo3(scope.row.chineseName)">挥发油信息</el-button>
<!--                    <el-button type="success" @click="viewInfo1(scope.row.oilChineseName)">促透应用信息</el-button>-->
                    <!--                            <el-button type="info" @click="viewInfo2(scope.row)">来源中药信息</el-button>-->
                </template>
            </el-table-column>
            </el-table-column>
        </el-table>
        <div class="block" align="center" >
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    layout="prev, pager, next"
                    :total="totals"
                    v-show="show8"
                    :page-size="pageSize">
            </el-pagination>
        </div>
        <el-dialog title="挥发油信息" :visible.sync="dialogTableVisible3">
            <div style="width: 84px;display:inline-block;" >
                <el-button v-for="(item,index) in oilName" :key="index" @click="findOil(item)" v-if="index<=9">{{item}}
                </el-button>

            </div>
            <br>
            <div style="width: 84px;display:inline-block;" >
                <el-button v-for="(item,index) in oilName" :key="index" @click="findOil(item)" v-if="index>9&&index<=18">{{item}}
                </el-button>

            </div>
            <br>
            <div style="width: 84px;display:inline-block;" >
                <el-button v-for="(item,index) in oilName" :key="index" @click="findOil(item)" v-if="index>18">{{item}}
                </el-button>

            </div>


        </el-dialog>
    </template>



</div>







    </el-main>

<!--    <el-footer>-->
<!--<h3>xfg©2023 All rights reserved xfg666@163.com</h3>-->
<!--    </el-footer>-->

</el-container>
</div>
<style>
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 174px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>


</body>

<script>
    new Vue({
        el: '#app',
        data :{
            i:0,
            id:"",
            word:"",
            language:"",
            currentPage:1,
            pageSize:5,
            totals:0,
            show1:false,
            show2:false,
            show3:false,
            show4:false,
            show5:false,
            show6:false,
            show7:false,
            show8:false,
            activeIndex: '1',
            activeIndex2: '1',
            logo:'img/logo1.png',
            fits:'scale-down',
            dialogTableVisible: false,
            dialogTableVisible1: false,
            dialogTableVisible2: false,
            dialogTableVisible3: false,
            srcList:["1"],
            formRule:{word:[{required:true,message:"请输入正确信息",trigger:'blur'}]},
            ticketInfoform:{
                composition:'',
                extractionMethod:'',
                document:''
            },
            ticketInfoform1:{
                drugPromotedCName:'',
                drugPromotedEName:'',
                massFraction:'',
                document:''
            },
            tableData: [],
            tableData1:[],
            fit:"contain",
            oilName:[],
            num:0,
            kuan:0,
            },
        methods: {
                findAll(){
                    var _this = this;
                    this.status="block";
                    var regu="^[ ]+$";
                    var re=new RegExp(regu);
                    if (this.word==""||this.word==null||re.test(this.word)||(this.word=="油")){
                        this.$message({
                            message: '警告，请输入正确信息',
                            type: 'warning'
                        });
                    }else {
                        // console.log(((this.word.replace(/(^s*)|(s*$)/g, "").length==1) && (this.word.replace(/(^s*)|(s*$)/g, "").indexOf("油")!=-1)))
                        // console.log((this.word.replace(/(^s*)|(s*$)/g, "").length))
                        // console.log( (this.word.replace(/(^s*)|(s*$)/g, "").indexOf("油")!=-1))
                        axios.get("http://localhost:8080/user/search?id="+this.id+"&word="+this.word).then(res=>{
                            if(this.id==1){
                                _this.tableData=res.data.oils;
                                _this.tableData1=res.data.oilList;
                                _this.totals=res.data.oilList.length;
                                _this.show1=true;
                                _this.show2=true;
                                _this.show3=false;
                                _this.show4=false;
                                _this.show5=false;
                                _this.show6=false;
                                _this.show7=false;
                                _this.show8=false;
                                _this.kuan=81;
                                console.log(res.data.oils[2]);
                            }else if (this.id==2){
                                _this.tableData1=res.data.drugList;
                                _this.totals=res.data.drugList.length;
                                _this.show1=false;
                                _this.show2=false;
                                _this.show3=true;
                                _this.show4=true;
                                _this.show5=false;
                                _this.show6=false;
                                _this.show7=false;
                                _this.show8=false;
                                _this.kuan=81;
                                console.log(res.data.drugList[0])
                            }else if(this.id==3){

                                _this.tableData=res.data.compositions;
                                _this.totals=res.data.compositions.length;
                                _this.show1=false;
                                _this.show2=false;
                                _this.show3=false;
                                _this.show4=false;
                                _this.show5=true;
                                _this.show6=true;
                                _this.show7=false;
                                _this.show8=false;
                                _this.kuan=61;
                                _this.num=19;
                                console.log(res.data.compositions[0])
                            }else if(this.id==4){

                                _this.tableData=res.data.drugPromoteds;
                                _this.totals=res.data.drugPromoteds.length;
                                _this.show1=false;
                                _this.show2=false;
                                _this.show3=false;
                                _this.show4=false;
                                _this.show5=false;
                                _this.show6=false;
                                _this.show7=true;
                                _this.show8=true;
                                _this.kuan=81;
                                console.log(res.data.drugPromoteds[0])
                            }
                            else {

                                _this.tableData1=res.data.oils;
                                _this.totals=res.data.oils.length;
                                _this.show1=true;
                                _this.show2=true;
                                _this.show3=false;
                                _this.show4=false;
                                _this.show5=false;
                                _this.show6=false;
                                _this.show7=false;
                                _this.show8=false;
                                _this.kuan=81;
                                console.log(res.data.oils[0])
                            }

                        })
                    }


                },
            //每页条数改变时触发 选择一页显示多少行
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
            },
            //当前页改变时触发 跳转其他页
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            // 点击ID 查看数据明细
            viewInfo(row){
                this.dialogTableVisible = true;
                var _this = this;
                axios.get("http://localhost:8080/user/search?id=7"+"&word="+row).then(res=>{
                    _this.ticketInfoform=res.data.oils;
                })
            },
            viewInfo1(row){
                this.dialogTableVisible1 = true;
                var _this = this;
                axios.get("http://localhost:8080/user/search?id=8"+"&word="+row).then(res=>{
                    _this.ticketInfoform1=res.data.oils;
                })
            },
            viewInfo2(row){
                this.dialogTableVisible2 = true;
                var _this = this;
                axios.get("http://localhost:8080/user/search?id=9"+"&word="+row).then(res=>{
                    _this.oilName=res.data.oilName;
                })
            },
            viewInfo3(row){
                this.dialogTableVisible3 = true;
                var _this = this;
                axios.get("http://localhost:8080/user/search?id=11"+"&word="+row).then(res=>{
                    _this.oilName=res.data.oilName;
                })
            },

            //获取图片地址
            getImgUrl (img) {
                return "/img/composition/" + img+ ".jpg";
            },
            getImgUrl1 (img) {
                return "/img/drug/" + img+ ".jpg";
            },
            //大图
            bigImg(url) {
                this.srcList[0] = url;
            },
            findOil(name){
                open("/oil.html?name="+name+"&id=1");
            },  findOilApplication(name){
                open("/oil.html?name="+name+"&id=2");
            },
            place(){
                   const width=window.screen.width;
                   const height=window.screen.height;
                   console.log(width,height)
                if (width<=1536){
                    this.num=12;
                }else {
this.num=27;
                }
                if (this.id==3){
                    this.kuan=50;
                    // console.log("1122222")
                }else {
                    // console.log("4444444")
                    this.kuan=81;
                }
                   // if (width<=18)
            },

        },
        created(){
            this.place();
        }
    })

</script>

<style>
    .my-label {
        background: #0AFFFF;
        width: 300px;
    }

    .my-content {
        width: 190px;
    }
    .my-label1 {
        background: #0AFFFF;
        width: 120px;
    }

    .my-content1 {
        width: 290px;
    }
</style>
</html>